<style lang="less">
@import "./commentManage.less";
</style>
<template>
  <div>
    <div class="search" id="commentManagePage" v-show="commentManagePageVisible">
      <Row>
        <Col>
        <Card>
          <Row>
            <Form ref="searchForm" :model="searchForm" inline :label-width="90" class="search-form">
              <Form-item label="主题名称" prop="title">
                <Input type="text" v-model="searchForm.title" clearable placeholder="请输入评论名称" style="width: 200px;" />
              </Form-item>
              <Form-item label="评论者" prop="author">
                <Input type="text" v-model="searchForm.author" clearable placeholder="请输入作者名称" style="width: 200px;" />
              </Form-item>
              <Form-item label="状态" prop="status">
                <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                  <Option value="1">通过</Option>
                  <Option value="0">未审核</Option>
                  <Option value="-1">未通过</Option>
                </Select>
              </Form-item>
              <!-- <span v-if="drop"></span> -->
              <Form-item style="margin-left:-35px;">
                <Button @click="handleSearch" type="primary" icon="search">搜索</Button>
                <Button @click="handleReset" type="ghost">重置</Button>
                <!-- <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                              </a> -->
              </Form-item>
            </Form>
          </Row>
          <Row class="operation">
            <Button @click="addComment" type="primary" icon="plus-round">添加评论</Button>
            <Button @click="delAll" type="ghost" icon="trash-a">批量删除</Button>
            <Dropdown @on-click="handleDropdown">
              <Button type="ghost">
                更多操作
                <Icon type="arrow-down-b"></Icon>
              </Button>
              <DropdownMenu slot="list">
                <DropdownItem name="refresh">刷新</DropdownItem>
                <DropdownItem name="exportData">导出所选数据</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Row>
          <Row>
            <Alert show-icon>
              已选择
              <span class="select-count">{{selectCount}}</span> 项
              <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
          </Row>
          <Row class="margin-top-10 searchable-table-con1">
            <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
            <Table :columns="columns" :data="exportData" ref="exportTable" style="display:none"></Table>
          </Row>
          <Row type="flex" justify="end" class="code-row-bg page">
            <Page :current="this.commentForm.pageNumber" :total="total" :page-size="this.commentForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50,100]" size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
        </Col>
      </Row>
    </div>

    <!-- hotel-room start -->
    <div class="search" id="commentReplyManagePage" v-show="commentReplyManagePageVisible">
      <Row>
        <Col>
        <Card>
          <Row class="margin-top-10 searchable-table-con1">
            <Table :loading="replyLoading" border :columns="commentReplyColumns" :data="replyData" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
            <Table :columns="commentReplyColumns" :data="exportData" ref="exportTable" style="display:none"></Table>
          </Row>
        </Card>
        </Col>
      </Row>
    </div>
    <!-- hotel-room end -->

    <div class="search" id="commentDetailPage" v-show="commentDetailPageVisible" style="background-color:white;padding:20px;">
      <comment-detail ref="commentDetailComp" @on-comment-cancel="commentDetailCancel" @on-comment-success="commentSubmitSuccess"></comment-detail>
    </div>

    <review-modal ref="commentReviewModal" @on-review-success="reviewSuccess"></review-modal>

  </div>
</template>

<script>
import dateFormatUtil from "@/utils/dateFormatUtil";

import CommentDetail from "./commentDetail.vue";
import ReviewModal from "../comm-comp/reviewModalComp.vue";

export default {
  name: "comment-manage",
  components: {
    CommentDetail,
    ReviewModal
  },
  data() {
    return {
      loading: true,
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "chevron-down",
      selectCount: 0,
      selectList: [],
      searchForm: {
        itemName: "",
        supplierId: "",
        itemPrice: "",
        status: ""
      },
      modalType: 0,
      modalTitle: "",
      commentForm: {
        status: 0
      },
      errorPass: "",
      submitLoading: false,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "评论主题",
          key: "topicId",
          width: 120,
          sortable: true
        },
        {
          title: "评论分类",
          key: "topicType",
          width: 120,
          sortable: true
        },
        {
          title: "评论内容",
          key: "content",
          width: 120,
          sortable: true
        },
        {
          title: "评论者",
          key: "nickname",
          width: 120,
          sortable: true
        },
        {
          title: "是否置顶",
          key: "isTop",
          width: 120,
          sortable: true
        },
        {
          title: "是否热评",
          key: "isHot",
          width: 120,
          sortable: true
        },
        {
          title: "点赞数",
          key: "likeNum",
          width: 120,
          sortable: true
        },
        {
          title: "是否回复",
          key: "isReply",
          width: 120,
          sortable: true
        },
        {
          title: "回复次数",
          key: "replyNum",
          width: 120,
          sortable: true
        },
        {
          title: "审核状态",
          key: "status",
          align: "center",
          width: 150,
          render: (h, params) => {
            let re = "";
            if (params.row.status === 0) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "未审核"
                )
              ]);
            } else if (params.row.status === -1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "未通过"
                )
              ]);
            } else if (params.row.status === 1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "通过"
                )
              ]);
            }
          },
          filters: [
            {
              label: "未审核",
              value: 0
            },
            {
              label: "未通过",
              value: -1
            },
            {
              label: "通过",
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 0) {
              return row.status === 0;
            } else if (value === -1) {
              return row.status === -1;
            } else if (value === 1) {
              return row.status === 1;
            }
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 340,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.review(params.row);
                    }
                  }
                },
                "审核"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],

      replyLoading: false,
      replyData: [],
      commentReplyColumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "评论ID",
          key: "commentId",
          width: 120,
          sortable: true,
          align: "center"
        },
        {
          title: "回复类型",
          key: "replyType",
          width: 120,
          sortable: true
        },
        {
          title: "回复ID",
          key: "replyId",
          width: 120,
          sortable: true
        },
        {
          title: "回复内容",
          key: "content",
          width: 120,
          sortable: true
        },
        {
          title: "回复目标",
          key: "toUid",
          width: 120,
          sortable: true
        },
        {
          title: "回复人昵称",
          key: "fromNickname",
          width: 150,
          sortable: true
        },
        {
          title: "回复类型",
          key: "isAuthor",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 340,
          align: "center",
          render: (h, params) => {
            return h("div", [
              // h(
              //   "Button",
              //   {
              //     props: {
              //       type: "primary",
              //       size: "small"
              //     },
              //     style: {
              //       marginRight: "5px"
              //     },
              //     on: {
              //       click: () => {
              //         this.editHotelRoom(params.row);
              //       }
              //     }
              //   },
              //   "编辑"
              // ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.removeHotelRoom(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],

      data: [],
      exportData: [],
      total: 0,
      commentManagePageVisible: true,
      commentReplyManagePageVisible: true,
      commentDetailPageVisible: false
    };
  },
  methods: {
    init() {
      this.getCommentList();
      this.cleanSelectCount();
      this.getCommentReplyList();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getCommentList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getCommentList();
    },
    getCommentList() {
      this.loading = true;
      this.getRequest("/comment/list", this.searchForm).then(res => {
        this.loading = false;
        if (res.success === true) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
        }
      });
    },
    getCommentReplyList() {
      this.loading = true;
      this.getRequest("/comment_reply/list", this.searchForm).then(res => {
        this.loading = false;
        console.log("================comment_reply=================");
        console.log(res);
        if (res.success === true) {
          this.replyData = res.result.content;
          // this.total = res.result.totalElements;
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.init();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.init();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.init();
    },
    handleDropdown(name) {
      if (name === "exportData") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要导出的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认导出",
          content: "您确认要导出所选 " + this.selectCount + " 条数据?",
          onOk: () => {
            this.$refs.exportTable.exportCsv({
              filename: "用户数据"
            });
          }
        });
      } else if (name === "refresh") {
        this.getCommentList();
      }
    },

    addComment(v) {
      this.$refs.commentDetailComp.resetFormByType(0, null);

      //切换界面显示隐藏
      this.commentManagePageVisible = false;
      this.commentReplyManagePageVisible = false;
      this.commentDetailPageVisible = true;
    },
    commentDetailCancel: function(v) {
      if (v) {
        this.commentManagePageVisible = true;
        this.commentReplyManagePageVisible = true;
        this.commentDetailPageVisible = false;
      }
    },
    commentSubmitSuccess: function(v) {
      if (v) {
        this.commentManagePageVisible = true;
        this.commentReplyManagePageVisible = true;
        this.commentDetailPageVisible = false;
        this.getCommentList();
      }
    },
    edit(v) {
      let editCommProductId = v.id;
      this.loading = true;
      this.getRequest("/comment/getCommentById?id="+editCommProductId).then(res => {
          this.loading = false;
          let updateCommProduct = res.result;

          this.$refs.commentDetailComp.resetFormByType(1, updateCommProduct);
          //切换界面显示隐藏
          this.commentManagePageVisible = false;
          this.commentReplyManagePageVisible = false;
          this.commentDetailPageVisible = true;
        })
        .catch(err => {
          console.log(err);
          console.log("============请求超时===============");
        });
    },
    show(v) {
      let editCommProductId = v.id;
      this.loading = true;
      this.getRequest("/comment/getCommentById?id="+editCommProductId).then(res => {
          this.loading = false;
          let updateCommProduct = res.result;

          this.$refs.commentDetailComp.resetFormByType(2, updateCommProduct);
          //切换界面显示隐藏
          this.commentManagePageVisible = false;
          this.commentReplyManagePageVisible = false;
          this.commentDetailPageVisible = true;
        })
        .catch(err => {
          console.log(err);
          console.log("============请求超时===============");
        });
    },
    enable(v) {
      this.$Modal.confirm({
        title: "不通过",
        content: "您确认不通过 " + v.goodsName + " ?",
        onOk: () => {
          this.putRequest("/goods/auditNotPass/" + v.id).then(res => {
            console.log("不通过2:", res);
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },

    review(v) {
      let reviewObj = {
        reviewId: v.id,
        title: "评论审核",
        status: v.status
        // ,reason: v.reason
      };
      let reviewUrl = "/comment/review";
      this.$refs.commentReviewModal.openReviewModal(true, reviewUrl, reviewObj);
    },
    reviewSuccess: function(v) {
      if (v) {
        this.getCommentList();
      }
    },

    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除评论 " + v.topicId + " ?",
        onOk: () => {
          this.deleteRequest("/comment/delete/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "chevron-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "chevron-up";
      }
      this.drop = !this.drop;
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
      this.cleanSelectCount();
    },
    cleanSelectCount() {
      this.selectCount = 0;
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          this.deleteRequest("/article/delete/" + ids).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    }
  },
  mounted() {
    console.log("============mounted==========");
    this.init();
  }
};
</script>
